<template>
  <div class="acList">
    <div class="search">
      <img src="@/assets/image/searIcon.png" />
      <input
        type="text"
        placeholder="请输入查询的活动名称"
        class="search"
        v-model="search"
      />
    </div>
    <div class="listBox">
      <table>
        <thead style="height: 0px;">
          <tr>
            <td>活动名称</td>
            <td>活动支出（元）</td>
            <td>活动地区</td>
            <td>活动时间</td>
          </tr>
        </thead>
        <tbody>
          <tr
            @click="goDetail(ac.acId)"
            v-for="(ac, index) in aclist"
            :key="ac.createTime"
          >
            <template v-if="index">
              <td>{{ ac.acName }}</td>
              <td>{{ ac.pay }}</td>
              <td>{{ ac.region }}</td>
              <td>{{ ac.createTime.slice(0, 10) }}</td>
            </template>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>
<script>
import emitter from '@/assets/utils/bus.js'
// import LIST_EVENT from '@/assets/utils/constants.js'
export default {
  components: {},
  data() {
    return {
      aclist: [
        {
          acName:"asdas",
          pay:12321,
          region:"湖南",
          createTime:"2011-12-23"
        }
      ],
      search: ''
    }
  },
  mounted() {
    for(let i = 0;i<16;i++){
      this.aclist.push({
        acName:function(){
          let l = Math.round(Math.random()*10)
          let name = ""
          const ch="abcdefghijklmnopqrstuvwxyz"
          for(let i = 0;i<l;i++){
            name+=ch[Math.round(Math.random()*26)]
          }
          return name
        }(),
        pay:Math.round(Math.random()*1000000),
        region:"湖南",
        createTime:Math.round(Math.random()*2023)+"-"+Math.round(Math.random()*100)+"-"+Math.round(Math.random()*31)
      })
    }
  },
  created() {
    emitter.on('listData', (res) => {
      console.log(res)
      this.aclist = res
    })
  },
  watch: {
    search(newValue, oldValue) {
      this.queryName(newValue, oldValue)
    }
  },
  methods: {
    async queryName(newValue, oldValue) {
      console.log(newValue, oldValue)
      if (newValue != '') {
        const { data: res } = await this.$http.get(
          'infoservice/activity/queryByName',
          { params: { name: newValue } }
        )
        console.log(res.data.list)
        this.aclist = res.data.list
      } else {
        emitter.on('listData', (res) => {
          console.log(res)
          this.aclist = res
        })
      }
    },
    goDetail(id) {
      this.$router.push({ name: 'acDetailInfo', params: { id } })
    }
  }
}
</script>
<style lang="less" scoped>
.acList {
  width: 82vw;
  height: 40vh;
  //top: 2vh;
  border: 1px solid rgb(255, 0, 14);
  margin-right: 100px;
  padding-right: 10px;
  .search {
    margin-left: 10px;
    height: 4vh;
    img {
      position: absolute;
      top: 17px;
      left: 15px;
      width: 10px;
      height: 10px;
    }
    input {
      background-color: transparent;
      color: #caa0a6;
      padding-left: 15px;
      border-radius: 5px;
      border: 1px solid #9e3d3d;
      outline: none; /*outline外边框，input:focus聚焦*/
      height: 20px;
      width: 160px;
      box-shadow: inset 0 1px 1px rgb(0 0 0 / 8%); //可以设置输入框阴影
    }
    input::-webkit-input-placeholder {
      color: rgba(255, 255, 255, 0.6);
      font-size: 12px;
    }
    input::-moz-placeholder {
      /* Mozilla Firefox 19+ */
      color: rgba(255, 255, 255, 0.6);
      font-size: 12px;
    }
    input:-moz-placeholder {
      /* Mozilla Firefox 4 to 18 */
      color: rgba(255, 255, 255, 0.6);
      font-size: 12px;
    }
    input:-ms-input-placeholder {
      /* Internet Explorer 10-11 */
      color: rgba(255, 255, 255, 0.6);
      font-size: 12px;
    }
  }
  table{
    border-collapse: collapse;
    width: 100%;
    height: 5vh;
    overflow-y: auto;
    text-align: center;
    position: relative;
    thead {
      line-height: 3vh;
      font-size: 10px;
      color: #fff;
      font-weight: 700;
      background-color: rgba(190, 53, 47, 0.8);
    }
  }
  .listBox {
    ////margin: 5px 3px;
    overflow-y: auto;
    height: 36vh;
    table {
      tbody {
        font-size: 8px;
        line-height: 25px;
        tr:nth-child(even) {
          background: rgba(193, 105, 92, 1);
          color: rgb(220, 236, 246);
        }
        tr:nth-child(odd) {
          background: rgba(131, 1, 1, 1);
          color: rgb(220, 166, 146);
        }
      }
    }
  }
}
</style>
